{% extends "base.html" %}
{% load static %}

{% block title %}{{ report.name }} - 测试报告详情{% endblock %}

{% block extra_css %}
<style>
    .result-card {
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 20px;
        text-align: center;
    }
    
    .result-card h3 {
        margin-bottom: 10px;
        font-size: 1.2rem;
    }
    
    .result-card .number {
        font-size: 2rem;
        font-weight: bold;
    }
    
    .total { background-color: #e9ecef; }
    .passed { background-color: #d4edda; }
    .failed { background-color: #f8d7da; }
    .error { background-color: #f8d7da; }
    .skipped { background-color: #fff3cd; }
    
    .execution-detail {
        margin-bottom: 30px;
        border: 1px solid #dee2e6;
        border-radius: 8px;
    }
    
    .execution-header {
        padding: 15px;
        background-color: #f8f9fa;
        border-bottom: 1px solid #dee2e6;
        border-radius: 8px 8px 0 0;
    }
    
    .execution-body {
        padding: 15px;
    }
    
    .execution-body pre {
        background-color: #f8f9fa;
        padding: 10px;
        border-radius: 4px;
        max-height: 300px;
        overflow-y: auto;
    }
    
    .result-pass { color: #28a745; }
    .result-fail { color: #dc3545; }
    .result-error { color: #dc3545; }
    .result-skip { color: #ffc107; }
    
    .error-message {
        color: #dc3545;
        padding: 10px;
        background-color: #f8d7da;
        border-radius: 4px;
        margin: 10px 0;
    }
</style>
{% endblock %}

{% block content %}
<div class="container mt-4">
    <!-- 报告头部 -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2>{{ report.name }}</h2>
        <div class="btn-group">
            <a href="{% url 'report_list' %}" class="btn btn-secondary">返回列表</a>
            <a href="{% url 'report_export' report.id 'pdf' %}" class="btn btn-danger" target="_blank">
                <i class="fas fa-file-pdf"></i> 导出PDF
            </a>
            <a href="{% url 'report_export' report.id 'html' %}" class="btn btn-primary" target="_blank">
                <i class="fas fa-file-code"></i> 导出HTML
            </a>
            <a href="{% url 'report_export' report.id 'json' %}" class="btn btn-info" target="_blank">
                <i class="fas fa-file-code"></i> 导出JSON
            </a>
        </div>
    </div>
    
    <!-- 基本信息 -->
    <div class="card mb-4">
        <div class="card-body">
            <div class="row">
                <div class="col-md-4">
                    <p><strong>项目：</strong>{{ report.project.name }}</p>
                    <p><strong>创建人：</strong>{{ report.creator.username }}</p>
                </div>
                <div class="col-md-4">
                    <p><strong>开始时间：</strong>{{ report.start_time|date:"Y-m-d H:i:s" }}</p>
                    <p><strong>结束时间：</strong>{{ report.end_time|date:"Y-m-d H:i:s" }}</p>
                </div>
                <div class="col-md-4">
                    <p><strong>总耗时：</strong>{{ duration|floatformat:2 }} 秒</p>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 测试结果统计 -->
    <div class="row mb-4">
        <div class="col-md-2">
            <div class="result-card total">
                <h3>总用例数</h3>
                <div class="number">{{ total_cases }}</div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="result-card passed">
                <h3>通过数</h3>
                <div class="number">{{ passed_cases }}</div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="result-card failed">
                <h3>失败数</h3>
                <div class="number">{{ failed_cases }}</div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="result-card error">
                <h3>错误数</h3>
                <div class="number">{{ error_cases }}</div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="result-card skipped">
                <h3>跳过数</h3>
                <div class="number">{{ skipped_cases }}</div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="result-card total">
                <h3>通过率</h3>
                <div class="number">{{ pass_rate }}</div>
            </div>
        </div>
    </div>
    
    <!-- 执行详情 -->
    <h3 class="mb-3">执行详情</h3>
    {% for execution in executions %}
    <div class="execution-detail">
        <div class="execution-header">
            <div class="row">
                <div class="col-md-4">
                    <strong>用例名称：</strong>{{ execution.test_case.name }}
                </div>
                <div class="col-md-4">
                    <strong>接口：</strong>{{ execution.test_case.interface.name }}
                </div>
                <div class="col-md-4 text-end">
                    <span class="badge result-{{ execution.result }}">{{ execution.result }}</span>
                    <span class="ms-2">{{ execution.duration|floatformat:2 }}秒</span>
                </div>
            </div>
        </div>
        
        <div class="execution-body">
            {% if execution.error_message %}
            <div class="error-message">
                {{ execution.error_message }}
            </div>
            {% endif %}
            
            <div class="mb-3">
                <h5>请求数据</h5>
                <pre>{{ execution.request_data|pprint }}</pre>
            </div>
            
            <div>
                <h5>响应数据</h5>
                <pre>{{ execution.response_data|pprint }}</pre>
            </div>
        </div>
    </div>
    {% endfor %}
</div>
{% endblock %} 